<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="include-head.jsp"%>

<body>
<%@include file="include-nav.jsp"%>
<div class="container-fluid">
    <div class="row">
        <%@include file="include-sidebar.jsp"%>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="/index">首页</a></li>
                <li><a href="/admin/query/for/search">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form id="roleForm" role="form" class="form-inline" action="/assign/role" method="post">
                        <input type="hidden" name="adminId" value="${param.adminId }" />
                        <input type="hidden" name="pageNum" value="${param.pageNum }" />
                        <div class="form-group">
                            <label for="leftSelect">未分配角色列表</label><br>
                            <select id="leftSelect" class="form-control" multiple size="10" style="width:100px;overflow-y:auto;">
                                <c:forEach var="role" items="${requestScope.unAssignedRoleList}">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li id="rightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li id="leftBtn" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label for="rightSelect">已分配角色列表</label><br>
                            <select name="roleIdList" id="rightSelect" class="form-control" multiple size="10" style="width:100px;overflow-y:auto;">
                                <c:forEach var="role" items="${requestScope.assignedRoleList}">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <button id="submitBtn" type="submit" style="width: 200px;"
                                    class="btn btn-success btn-lg btn-block">分配</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#rightBtn").click(function () {
            $("#leftSelect>option:selected").appendTo("#rightSelect");
        });
        $("#leftBtn").click(function () {
            $("#rightSelect>option:selected").appendTo("#leftSelect");
        });
        $("#submitBtn").click(function () {
            $("#rightSelect>option").prop("selected","selected");
        });
    });
</script>
